<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>05_网格布局-设置单元格的数量和尺寸</title>
        <style>
            .container {
                width: 400px;
                height: 400px;
                background-color: #ccc;

                display: grid;

                /* (1) 像素 */
                grid-template-rows: 100px 100px;
                grid-template-columns: 100px 100px 100px;

                /* (2) 百分比 */
                grid-template-rows: 20% 20% auto;
                grid-template-columns: 30% 30% auto;

                /* (3) fr 网格布局独有的单位 */
                /* 400 / 5          80 160  160 */
                grid-template-rows: 1fr 2fr 2fr;
                grid-template-columns: 1fr 2fr 2fr;


                /* (4) repeat 重复多少次 */
                /* repeat（次数，单位长度） */
                grid-template-rows: repeat(3,100px);
                grid-template-columns: repeat(3,100px);
            }

            .item {
                font-size: 30px;
                background-color: tomato;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>